<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>justify-content属性</title>
  <style>
    .dstart,.dend,.dcenter,.dbetween,.daround{
      width: 100%;
      height: 120px;
      background-color: lightblue;
      display: flex;
      justify-content: flex-start;
    }
    .dend {
      justify-content: flex-end;
    }
    .dcenter {
      justify-content: center;
    }
    .dbetween {
      justify-content: space-between;
    }
    .daround {
      justify-content: space-around;
    }
    .d1,.d2,.d3,.d4,.d5 {
      width: 200px;
      height: 100px;
      background-color: orangered;
      margin-bottom: 5px;
      margin-right: 5px;
    }
  </style>
</head>
<body>
  <!--justify-content: 定义了子盒子在主轴上的对齐方式-->
  <h1>1. justify-content: 定义了子盒子在主轴上的对齐方式 <hr size="3" color="red"></h1>
  <h3>1.1 justify-content: flex-start <hr></h3>
  <div class="dstart">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.2 justify-content: flex-end <hr></h3>
  <div class="dend">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.3 justify-content: center <hr></h3>
  <div class="dcenter">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.4 justify-content: space-between <hr></h3>
  <div class="dbetween">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
  <h3>1.5 justify-content: space-around <hr></h3>
  <div class="daround">
    <div class="d1">d1</div>
    <div class="d2">d2</div>
    <div class="d3">d3</div>
    <div class="d4">d4</div>
    <div class="d5">d5</div>
  </div>
</body>
</html>

